<template>
    <div>
        <!--叶子级菜单-->
        <template v-if="route.children && route.children.length === 0">
            <el-menu-item :key="route.menuId" :index="route.filePath">
                {{route.menuName}}
            </el-menu-item>
        </template>
        <!--父级菜单-->
        <el-submenu v-else :index="route.filePath" style="text-align: left">
            <span slot="title" style="font-size: 17px;">
                <i :class="route.authorityLogo"></i>
                {{route.menuName}}
            </span>
            <template v-for="child in route.children">
                <sidebar-item v-if="child.children && child.children.length>0" :key="child.menuId" :route="child"/>
                <el-menu-item v-else :key="child.id" :index="child.filePath" @click="check(child.filePath)">
                <i :class="child.authorityLogo"></i>
                    {{child.menuName}}
                </el-menu-item>
            </template>
        </el-submenu>
    </div>
</template>

<script>
export default {
    name:"sidebarItem",    
    props: {
        route: {
            type: Object,
            required: true
        }
    },
    data(){
        return{

        }
    },
    created(){

    },
    mounted(){

    },
    methods:{
        check(url){
            // console.log(url);
            this.$router.replace(url)
        }
    }
}
</script>

<style>

.el-submenu [class^=el-icon-] {
    font-size: 15px;
}
</style>
